<template>
  <view class="home-container">
    <!-- 顶部区域 -->
    <view class="header">
      <view class="title-row">
        <text class="title">首页</text>
      </view>
      <view class="header-row">
        <view class="campus-selector">
          <picker @change="onCampusChange" :value="campusIndex" :range="campusList">
            <view class="picker-view">
              <view class="picker-text">{{ campusList[campusIndex] }}</view>
              <view class="arrow-down">▼</view>
            </view>
          </picker>
        </view>
        <view class="login-link" @tap="goToLogin" v-if="!isLoggedIn">
          <view class="login-text">登录校园网账号开启精彩校园功能</view>
        </view>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view scroll-y="true" class="content-area">
      <!-- 错误显示 -->
      <error-display 
        :show="showError" 
        :title="errorTitle" 
        :message="errorMessage" 
        @retry="retryLoading"
      />
      
      <!-- 加载中显示 -->
      <view class="loading-container" v-if="isLoading">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
      

      

      

      
      <!-- 正常内容 -->
      <view v-if="!showError && !isLoading && pageData && pageData.categories">
        <!-- 动态渲染分类和项目 -->
        <view v-for="category in pageData.categories" :key="category.id" class="category-section">
          <!-- 分类标题 -->
          <view class="section-title">
            <text>{{ category.name }}</text>
          </view>
          
          <!-- 项目按钮 -->
          <view class="button-row" :class="{ 'multi': category.items && category.items.length > 6 }" v-if="category.items && category.items.length > 0">
            <view 
              v-for="item in category.items" 
              :key="item.id"
              class="grid-button"
              :class="{ 'small': item.is_small }"
              @tap="navigateToItem(item)"
            >
              <view class="icon-container" :class="{ 'small': item.is_small }">
                <image 
                  class="icon-image" 
                  :src="item.icon" 
                  mode="aspectFit"
                  @error="onImageError"
                ></image>
              </view>
              <text class="button-text">{{ item.name }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import content from '@/common/api/content.js';
const pageAPI = content.page;
import ErrorDisplay from '@/components/ErrorDisplay.vue';
import { NavigationHelper } from '@/common/utils/navigation.js';
import { ErrorHandler } from '@/common/utils/errorHandler.js';

export default {
  components: {
    ErrorDisplay
  },
  
  data() {
    return {
      isLoggedIn: false,
      campusIndex: 0,
      campusList: ['请选择校区', '啬园校区', '启秀校区', '启东校区'],
      isLoading: true,
      showError: false,
      errorTitle: '加载失败',
      errorMessage: '无法连接到服务器，请检查网络连接',
      pageData: {
        categories: [
          {
            id: 1,
            name: '校园服务',
            items: [
              {
                id: 1,
                name: '校园卡',
                description: '校园卡服务',
                icon: '/static/icons/helper.png',
                content_type: 'markdown',
                content: '# 校园卡服务\n\n这里是校园卡相关功能...',
                is_small: false
              },
              {
                id: 2,
                name: '图书馆',
                description: '图书馆服务',
                icon: '/static/icons/library.png',
                content_type: 'external',
                external_url: 'https://lib.ntu.edu.cn',
                is_small: false
              },
              {
                id: 4,
                name: '页面类型项目',
                description: '页面类型项目服务',
                icon: 'https://img.icons8.com/color/96/document.png',
                content_type: 'subpage',
                is_small: false
              },
              {
                id: 5,
                name: '富文本测试',
                description: '富文本渲染测试页面',
                icon: 'https://img.icons8.com/color/96/rich-text.png',
                content_type: 'test_page',
                test_page: 'rich-text',
                is_small: false
              },
              {
                id: 6,
                name: '富文本简单测试',
                description: '富文本组件直接测试',
                icon: 'https://img.icons8.com/color/96/test-tube.png',
                content_type: 'test_page',
                test_page: 'rich-text',
                is_small: false
              }
            ]
          },
          {
            id: 2,
            name: '学习工具',
            items: [
              {
                id: 3,
                name: '课程表',
                description: '查看课程表',
                icon: '/static/icons/schedule.png',
                content_type: 'markdown',
                content: '# 课程表\n\n这里是课程表功能...',
                is_small: false
              }
            ]
          }
        ]
      }
    }
  },
  
  onLoad() {
    // 检查用户是否已登录
    this.checkLoginStatus();
    
    // 加载页面数据
    this.loadPageData();
  },
  
  methods: {
    // 加载页面数据
    async loadPageData() {
      this.isLoading = true;
      this.showError = false;
      
      try {
        // 获取首页数据
        const response = await pageAPI.getPageData('home');
        // console.log('API响应数据:', response);
        
        // 检查API响应的数据结构
        if (response && response.data) {
          // API返回的数据结构是 { code: 200, data: [...], message: "success" }
          // 其中data是分类数组，每个分类包含items数组
          if (Array.isArray(response.data)) {
            this.pageData = { categories: response.data };
            // console.log('使用API数据 - 分类数组格式:', this.pageData);
          }
          // 如果data是对象且包含categories字段
          else if (response.data.categories && Array.isArray(response.data.categories)) {
            this.pageData = response.data;
            // console.log('使用API数据 - 对象格式:', this.pageData);
          }
          // 其他格式
          else {
            // console.log('API数据格式未知，使用默认数据');
          // console.log('实际API响应:', response);
            // 保持默认数据
          }
        } else {
          // console.log('API数据格式不正确，使用默认数据');
        // console.log('实际API响应:', response);
          // 确保pageData有值，使用已初始化的默认数据
        }
      } catch (error) {
        // console.error('加载页面数据失败:', error);
        // console.log('API调用失败，使用默认数据');
        // 不显示错误，确保pageData有值以显示默认数据
        this.showError = false;
        // pageData已经在data()中初始化了默认数据，无需重新赋值
        // console.log('当前pageData:', this.pageData);
      } finally {
        // 确保加载状态结束
        this.isLoading = false;
        // console.log('页面加载完成，当前状态:', {
        //   isLoading: this.isLoading,
        //   showError: this.showError,
        //   hasPageData: !!this.pageData,
        //   categoriesCount: this.pageData?.categories?.length || 0
        // });
      }
    },
    
    // 重试加载
    retryLoading() {
      this.loadPageData();
    },
    
    checkLoginStatus() {
      // 这里可以从缓存或全局状态中获取登录状态
      const token = uni.getStorageSync('token');
      this.isLoggedIn = !!token;
    },
    
    onCampusChange(e) {
      this.campusIndex = e.detail.value;
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/index/index'
      });
    },
    
    // 处理项目导航 - 使用公共工具类
    async navigateToItem(item) {
      await NavigationHelper.navigateToItem(item);
    },
    
    // 处理错误 - 使用公共工具类
    handleError(error) {
      const errorInfo = ErrorHandler.handleApiError(error);
      this.errorTitle = errorInfo.errorTitle;
      this.errorMessage = errorInfo.errorMessage;
    },
    // 图片加载错误处理
    onImageError(e) {
      // console.error('图片加载失败:', e);
      // 可以设置默认图片
      e.target.src = '/static/icons/helper.png';
    }
  }
}
</script>

<style>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部区域样式 */
.header {
  display: flex;
  flex-direction: column;
  background-color: #1e3c72;
  color: #fff;
  position: relative;
  padding-top: calc(20rpx + 44px);
}

.title-row {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
}

.title {
  color: #fff;
  font-size: 40rpx;
  font-weight: 700;
  text-align: center;
  -webkit-font-smoothing: subpixel-antialiased;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
}

.campus-selector {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
}

.picker-view {
  display: flex;
  align-items: center;
}

.picker-text {
  font-size: 32rpx;
  font-weight: 500;
  margin-right: 10rpx;
}

.arrow-down {
  font-size: 24rpx;
}

.login-link {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
}

.login-text {
  font-size: 28rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* 内容区域样式 */
.content-area {
  flex: 1;
  padding: 20rpx;
  overflow-y: scroll;
  min-height: 0;
}

/* 分类区域样式 */
.category-section {
  margin-bottom: 40rpx;
}

/* 加载中样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid #f3f3f3;
  border-top: 6rpx solid #1e3c72;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666;
}

/* 小标题样式 */
.section-title {
  margin: 20rpx 0 20rpx 0;
  padding: 0 20rpx;
}

.section-title text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.section-title text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 32rpx;
  background-color: #1e3c72;
  border-radius: 4rpx;
}

/* 按钮样式已移至公共样式文件 button-common.wxss */
</style>